嗨！今天的主題是加 analytics 到網站 (專案) 裡～ 講到 analytics，大家通常會想到 Google Analytics，所以今天會分享怎麼加到 Next.js 專案裡。還有最近找到的 analytics 平台，叫做 Splitbee，今天會一起分享～

Google Analytics

想要用 Google Analytics 之前，需要登入到 Google 帳號，然後新增完 property 之後，輸入網站的網址，最後會拿到我們的 Measurement ID 和一段 script：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={GA_TAG}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', {GA_TAG});
</script>

Splitbee

首先，需要辦 Splitbee 的帳號，然後新增 project，輸入網站的網址，最後跟 Google Analytics 一樣，會拿到一段 script，可是它沒有任何 ID。代表每一個專案會用到一樣的 script：

<!-- 記得要用 async 或 defer 喔～ -->
<script async src="https://cdn.splitbee.io/sb.js"></script>

不過如果需要更多的功能，也可以裝 Splitbee 的 JS library @splitbee/web～

優點

UI 非常乾淨，設定也很簡單，然後他們網站寫說我們的資料是我們的而不會把資料賣掉ＸＤ Splitbee 的 script 大小比 GA 小 (14次)。最後，Splitbee 提供 automation 功能，代表每次有使用者的 event，我們可以設定一些動作，例如寄信給使用者。

Next.js Script Optimization

Next.js 提供這個功能，所以需要加 <script> 的時候，可以用 next/script 的 Script component。它提供不同的 strategy：

• beforeInteractive，還沒有辦法跟 page 互動之前，Next.js 會先引入和執行 script
• afterInteractive (default)，可以跟 page 互動之後才去抓取和執行 script，像 analytics
• lazyOnload，等到 idle 時候抓取和執行 script，像 chat 或 feedback widget

Script 元件不該放在 next/head 的 Head 元件裡，可是加在 page 的 body 裡～

加 Analytics

因為 Script 元件不該放在 Head 元件裡，而且這些 script 需要用在所有的 page 裡，所以我把下面這些 scripts 放在 pages/_app.js 裡：

<Script
  strategy="afterInteractive"
  src="https://cdn.splitbee.io/sb.js"
/>
<Script
  strategy="afterInteractive"
  src="https://www.googletagmanager.com/gtag/js?id={GA_TAG}"
/>
<Script id="analytics" strategy="afterInteractive">
  <!-- Inline scripts -->
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', {GA_TAG});
  `}
</Script>

Script 元件也可以放 inline scripts，不過需要放 id attribute，像上面的 Google Analytics scripts 加了 id="analytics"。

小結

今天講的不詳細，不過希望大家如果有 analytics 的需求，可以看看 Splitbee 或是當然用最常用的 Google Analytics。要加任何 scripts 的時候也記得用 next/script 的 Script，這樣 Next.js 會自動做 scripts 的優化～

大家想要看看之前的網站可以看這裡，或是直接到首頁～ 有任何問題可以問我，或是也可以討論未來要開發的 No-code 專案喔。

祝大家明天上班上課愉快！

晚安 <3